<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>全局组件</title>
</head>
<script>
   /*
        在vue中，组件是一种抽象，是可以复制的一个vue实例,拥有组件
        名称，可以扩展html元素，以组件名称的方式作为自定义的标签名
        .因为组件具有可复用性.

        全局组件 component()方法进行注册

    */
</script>

<body>
  <div id="app">
    <!-- 使用全局组件 -->
    <my-component></my-component>>    
  </div>

  <script src="https://unpkg.com/vue@next"></script>
  <script>
   const vm = Vue.createApp({})
     vm.component('my-component',{  //注册一个全局组件
        data(){
          return{
            msg:'红罗袖里分明见'
        }
      },
        template:
        `<div><h2>{{msg}}</h2></div>`
     })
     vm.mount('#app')
  </script>
</body>

</html>
